<template>
	<transition>
    <div class="loading" v-show="isShow">
      <van-loading color="white"/>
    </div>
	</transition>
</template>
<script>
import { Loading } from 'vant';
Vue.use(Loading);
export default {
    name: "loading",
    components: {
        Loading
    },
	data() {
		return {
			isShow: false
		};
	},

	created() {},
	methods: {
		show() {
			this.isShow = true;
		},
		hide() {
			const self = this;
			setTimeout(() => {
				self.isShow = false;
			}, 2000);
		}
	}
};
</script>
<style lang="stylus">
.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  width: 100vw;
  height: 100vh;
  text-align: center;

  .van-loading {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    padding: 40px;
    margin: auto;
    margin-top: 68%;
    z-index: 0;
    font-size: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
  }
}
</style>